<template>
	<div>

		<el-container>
			<el-header height='80'>
				<div class="flex flex-row-between " style="padding: 10px 0;">
					<!-- <div style="
background: linear-gradient(180deg, #3CB4FE 0%, #328DFB 100%);
text-align: center;padding:10px 20px;color: #fff;font-size: ;">
					 奇顺驾校
				  </div> -->
					<div class="flex flex-col-center">
						<img :src="config.pcLogo" style="width: 40px;height: 40px;" />
						<div class="u-margin-left-20" style="color: #3496FB;font-size:18px;">{{config.pcTitle}}</div>
					</div>
					<div class="flex flex-col-center">
						<div style="margin-right: 20px;">
						<el-dropdown @command="selectFont">
								<span class="el-dropdown-link" style="color: #3496FB;font-size: 15px;">
									字号{{font}}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command='26'>26号</el-dropdown-item>
							        <el-dropdown-item command='28'>28号</el-dropdown-item>
									<el-dropdown-item command='30'>30号</el-dropdown-item>
									<el-dropdown-item command='32'>32号</el-dropdown-item>
									<el-dropdown-item command='34'>34号</el-dropdown-item>
									<el-dropdown-item command='36'>36号</el-dropdown-item>
									<el-dropdown-item command='38'>38号</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
						<div style="color:#3CB4FE ;" class="flex flex-col-center u-font-20 font-bold">
							<span class="u-margin-right-20">{{user.realname}}</span>
							<el-dropdown @command="dropdown">
								<i class="el-icon-switch-button font-bold " style="color:#3CB4FE ;font-size: 20px;"></i>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command='back'>退出</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>

						</div>
					</div>

				</div>
		 </el-header>


			<router-view></router-view>


		</el-container>


	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				user: {},
				config: {},
			}
		},
		computed: {
			...mapState(['font']),
		},
		created() {
			this.getInfomation()
		},
		methods: {
			...mapMutations(['ADD_FONT']),
	         selectFont(e) {
				this.font = e;
				this.ADD_FONT(e)
			},
			dropdown(e) {
				if (e == 'back') {
					window.localStorage.removeItem('userInfo')
					this.$router.replace('/register')
				}
			},
			getInfomation() {
				this.axios.post("/user/information", ).then(res => {
					this.user = res;
				}).catch(error => {})
				this.axios.post("/index/getConfig", ).then(res => {
					this.config = res;
				}).catch(error => {})

			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
